<template>
    <!-- bg-size 是 bg-16-->
    <div :class="[`bg-${size}`, `${trueType}`]" ></div>
</template>

<script>

export default {
    components: {},
    
    props:{
        size:{
            required:true,
            type:String,
        },
        type:{
        /* 
            decrease  减免    0
            discount  打折    1
            special   特价    2
            guarantee 保单
            invoice   发票
           
        */ 
            required:true,
        }
    },
    data() {
        return {

        };
    },
    computed: {
        trueType(){
            let lastType = '';
            switch (+this.type) {
                case 0:
                lastType = "decrease";
                break;
                case 1:
                lastType = "discount";
                break;
                case 2:
                lastType = "special";
                break;
                case 3:
                lastType = "guarantee";
                break;
                case 4:
                lastType = "invoice";
                break;

            }
            return lastType
        }
    },
    }
</script>
<style scoped>
    .bg-16{
        width: 32rem;
        height: 32rem;
    }
    .bg-24{
        width: 48rem;
        height: 48rem;
    }
    .decrease{
        background: url('./img/decrease_2@2x.png') no-repeat;
        background-size: cover;
    }
    .discount{
        background: url('./img/discount_2@2x.png') no-repeat;
        background-size: cover;
    }
    .special{
        background: url('./img/special_2@2x.png') no-repeat;
        background-size: cover;
    }
    .guarantee{
        background: url('./img/guarantee_2@2x.png') no-repeat;
        background-size: cover;
    }
    .invoice{
        background: url('./img/invoice_2@2x.png') no-repeat;
        background-size: cover;
    }
   
</style>